<template>
  <div class="main-container">
    <!-- 加载状态 -->
    <van-loading v-if="loading" color="#1989fa" size="40" class="loading" />
    
    <!-- 错误提示 -->
    <van-empty 
      v-else-if="error" 
      description="数据加载失败，请重试" 
      @click="fetchData"
    />

    <!-- 我的页面内容 - 条件显示 -->
    <div v-else-if="showMyPage" class="my-page">  
      <!-- 用户信息区域 -->
      <div class="user-info">
        <img src="../../assets/useravatar.png" class="avatar" alt="用户头像" />
        <div class="account">账号: {{ userAccount }}</div>
        
        <!-- 关键调整：用固定网格布局替代弹性布局，确保三列严格对齐 -->
        <div class="stats" @click="showMyPage = false">
          <!-- 订单总数区域 -->
          <div class="stat-item">
            <div class="stat-label">订单总数</div>
            <div class="stat-value">{{ totalOrders }}</div>
          </div>
          <!-- 充电电量总和区域（修正原“充电电流总和”表述，与数据字段totalPower匹配） -->
          <div class="stat-item">
            <div class="stat-label">充电电量总和</div> 
            <div class="stat-value">
              <span class="value-text">{{ totalPower }}</span>
              <span class="unit">度</span>
            </div>
          </div>
          <!-- 费用总和区域 -->
          <div class="stat-item"> 
            <div class="stat-label">费用总和</div>
            <div class="stat-value">
              <span class="value-text">{{ totalFee }}</span>
              <span class="unit">元</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能模块（保持不变） -->
      <div class="functions">
        <div 
          class="function-item device-item" 
          @click="handleMyFleetClick"
        > 
          <div class="function-content">
            <span>我的车队及设备</span>
          </div>
        </div>
        
        <div class="function-separator"></div>
        
        <div class="function-item password-item"> 
          <div class="function-content">
            <span>修改密码</span>
          </div>
        </div>
      </div>
      
      <!-- 退出登录按钮 -->
      <div class="logout-btn-wrapper">
        <van-button 
          type="primary" 
          block 
          class="logout-btn"
          @click="showLogoutConfirm"
        >
          退出登录
        </van-button>
      </div>
    </div>

    <!-- 历史记录页面 -->
    <HistoricalRecords 
    v-else 
    @backToMyPage="showMyPage = true" 
    />

    <!-- 退出登录确认弹窗 -->
    <van-dialog
      v-model:show="showLogoutDialog"
      title="确认退出"
      content="确定要退出登录吗？"
      show-cancel-button
      @confirm="handleLogout"
      @cancel="showLogoutDialog = false"
    />
  </div>
</template>

<script setup>
// 脚本部分保持不变（与原代码一致）
import { Button, Dialog, Loading, Empty } from 'vant';
import { ref, onMounted } from 'vue';
import HistoricalRecords from '@/page/home/historicalRecords.vue';
import { getChargeRecord } from '@/api/api';
import { Toast } from 'vant';
import { useRouter } from 'vue-router'
const router = useRouter()

const showMyPage = ref(true);
const showLogoutDialog = ref(false);
const loading = ref(true);
const error = ref(false);
const userAccount = ref('');
const totalOrders = ref(0);
const totalPower = ref(0);
const totalFee = ref(0);

const fetchData = async () => {
  try {
    loading.value = true;
    error.value = false;
    const response = await getChargeRecord();
    userAccount.value = response.data.userAccount || '';
    totalOrders.value = response.data.totalOrders || 0;
    totalPower.value = Number(response.data.totalElectricAmount || 0).toFixed(1);
    totalFee.value = Number(response.data.totalChargeCost || 0).toFixed(1);
  } catch (err) {
    console.error('获取数据失败:', err);
    error.value = true;
  } finally {
    loading.value = false;
  }
};

const handleMyFleetClick = () => {
  Toast('提示内容');
};

onMounted(() => {
  fetchData();
});

const showLogoutConfirm = () => {
  showLogoutDialog.value = true;
};

const handleLogout = () => {
  localStorage.removeItem('token'); // 清除 token
  sessionStorage.removeItem('userInfo'); // 清除用户信息
  showLogoutDialog.value = false;
  router.push({ name: 'Login' })
};
</script>

<style scoped>
/* 主容器样式（保持不变） */
.main-container {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 加载状态样式（保持不变） */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 我的页面样式（保持不变） */
.my-page {
  height: 100%;
  min-height: 100vh;
  background: url('@/assets/my.png') repeat-x center top/auto 100%;
  background-size: cover; 
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.user-info {
  margin: 10px;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.account {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

/* 关键调整1： stats 容器用 grid 布局，三列等分且强制不换行 */
.stats {
  display: grid; /* 替换原 flex 布局，避免列宽不一致 */
  grid-template-columns: repeat(3, 1fr); /* 三列等分，每列占1/3宽度 */
  gap: 8px; /* 列之间留小间距，避免拥挤 */
  background-color: white;
  padding: 15px 10px; /* 左右内边距统一，减少列偏移 */
  border-radius: 8px;
  margin-top: -10px;
  box-sizing: border-box; /* 确保内边距不影响整体宽度 */
}

/* 关键调整2： stat-item 统一样式，强制文字不换行 */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 标签和数值都居中，避免左右偏移 */
  padding: 10px 0; /* 上下内边距统一，取消原30px底部内边距 */
  width: 100%; /* 占满grid列宽 */
  box-sizing: border-box;
  white-space: nowrap; /* 强制所有文字不换行 */
}

/* 关键调整3： 标签（stat-label）统一样式，避免左右对齐不一致 */
.stat-label {
  font-size: 14px; /* 统一标签字体大小，取消原12px/14px差异 */
  color: #666;
  margin-bottom: 6px; /* 标签与数值间距统一 */
  width: 100%;
  text-align: center !important; /* 强制居中，取消原左右对齐差异 */
  padding: 0 !important; /* 取消原左右10px内边距，避免偏移 */
  overflow: hidden; /* 极端情况文字过长时隐藏（配合nowrap） */
  text-overflow: ellipsis; /* 文字过长时显示省略号，不换行 */
}

/* 关键调整4： 数值区域统一布局，单位与数值紧凑排列 */
.stat-value {
  display: flex; /* 数值和单位横向排列 */
  align-items: baseline; /* 数值与单位基线对齐，视觉更整齐 */
  font-size: 18px; /* 统一数值字体大小，取消原16px/18px差异 */
  color: #333;
}

/* 数值文本单独控制，避免单位影响对齐 */
.value-text {
  font-weight: 500; /* 数值加粗，突出显示 */
}

/* 单位统一样式，与数值区分 */
.unit {
  font-size: 14px; /* 单位字体比数值小，不抢视觉焦点 */
  color: #666;
  margin-left: 2px; /* 单位与数值留小间距，避免粘连 */
}

/* 关键调整5： 取消原差异化样式（避免破坏对齐） */
.stat-item:nth-child(1),
.stat-item.fee-item {
  & .stat-label,
  & .stat-value,
  & .unit {
    font-size: inherit !important; /* 继承统一样式，取消差异化 */
  }
}
.stat-item:not(:nth-child(1)):not(.fee-item) {
  & .stat-label,
  & .stat-value,
  & .unit {
    font-size: inherit !important; /* 继承统一样式，取消差异化 */
  }
}

/* 功能模块样式（保持不变） */
.functions {
  margin: 20px;
  font-size: 18px;
  padding: 5px;
  margin-bottom: 10px;
}

.function-item {
  padding: 15px;
  border-radius: 8px;
  background-color: #EDEDED;
  transition: background-color 0.2s;
  position: relative;
}

.function-separator {
  height: 10px;
}

.function-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 退出按钮容器样式（保持不变） */
.logout-btn-wrapper {
  margin: 15px 30px 30px;
  position: relative;
  z-index: 1;
}

.logout-btn {
  border-radius: 20px;
  background: rgba(255, 32, 32, 0.5);
  width: 100%;
  height: 40px;
}

/* 功能项背景图样式（保持不变） */
.device-item,
.password-item,
.fee-item {
  background-image: url('@/assets/Obliquetriangularbackground.png');
  background-repeat: no-repeat;
  background-position: right 5px bottom 5px;
  background-size: 15px 15px;
}

/* 安全区域适配（保持不变） */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .logout-btn-wrapper {
    margin-bottom: calc(30px + constant(safe-area-inset-bottom, 0px));
    margin-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
}
</style>